<template>
	<view class="tabbar pd30">
		<view class="tabItem" :key="index" v-for="(i,index) in list" @tap="tabChange(i)"
			:class="active==index?'active':''">
			<view class="ico">
				<view v-if="active==index">
					<image :src="i.activeIcon" mode="heightFix"></image>
				</view>
				<view v-else>
					<image :src="i.icon" mode="heightFix"></image>
				</view>
			</view>
			<view class="tabp">
				{{i.name}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		tabList
	} from '@/utils/tabBar';
	export default {
		name: "TabBar",
		props: {
			active: {
				type: Number,
				default: 0
			},
			type: {
				type: String,
				default: 'tourist'
			}
		},
		data() {
			
			return {
				list: [{
						name: '首页',
						url: '/pages/home/home',
						icon: '../../static/images/icon-tab1.svg',
						activeIcon: '../../static/images/icon-tab1-active.svg'
					},
					{
						name: '测评',
						url: '/subpage/test/test',
						icon: '../../static/images/icon-tab2.svg',
						activeIcon: '../../static/images/icon-tab2-active.svg'
					},
					{
						name: '任务',
						url: '/subpage/student/works/works',
						icon: '../../static/images/icon-tab3.svg',
						activeIcon: '../../static/images/icon-tab3-active.svg'
					},
					{
						name: '我的',
						url: '/pages/my/my',
						icon: '../../static/images/icon-tab4.svg',
						activeIcon: '../../static/images/icon-tab4-active.svg'
					}
				]
			};
		},
		methods: {
			tabChange(obj) {
				if (!obj.url) {
					uni.showToast({
						title: "请先登录！",
						icon: 'error'
					});
					return;
				};
				uni.redirectTo({
					url: obj.url
				});
			}
		},
		watch: {
			type: function() {
				this.list = tabList[this.type];
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabbar {
		padding-top: 30rpx;
		padding-bottom: 40rpx;
		background: #fff;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;

		.tabItem {
			flex: 0 0 auto;
			width: 25%;
			padding: 0 20rpx;
			box-sizing: border-box;
			text-align: center;

			.ico {
				height: 42rpx;
				margin-bottom: 24rpx;

				image {
					display: block;
					width: auto;
					height: 42rpx;
					margin: auto;
				}
			}

			.tabp {
				font-size: 24rpx;
				color: #baac9b;
			}

			&.active {
				.tabp {
					color: #7a6458;
				}
			}
		}
	}
</style>